<template>
  <el-dialog v-model="drawer" :title="title" width="560px" :append-to-body="true" @close="close" center>
    <div v-if="isShow">
      <el-tree :data="data"
               :props="defaultProps"
               :load="loadNode"
               node-key="id"
               @node-click="handleNodeClick"
               :default-expanded-keys="[0]"
               lazy/>
    </div>
    <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="close">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-UploadFilled" @click="submit">确定</el-button>
          </span>
    </template>
  </el-dialog>
</template>

<script>


import {computed, reactive, toRefs} from "vue";
import {getFolder,batchMove} from "../../../api/space/manage";
import {ElMessage} from 'element-plus'

export default {
  name: "FolderMove",
  props: {
    selectFolder: {
      type: Object,
      default: null
    },
    currentSelectFileIds: {
      type: Array,
      default: []
    },
    dialogDrawer: {
      type: Boolean,
      default: false
    },
  },
  emits: ["onSubmit","update:dialogDrawer"],
  setup(props, context) {
    const { dialogDrawer,selectFolder,currentSelectFileIds } = toRefs(props)
    let drawer = computed({
      get: () => {
        if (dialogDrawer.value){
          init()
          if(selectFolder.value == null){
            state.mode = 1
            state.title = "文件批量移动"
            state.formData.fileIds = []
            for (let i = 1; i < currentSelectFileIds.value.length; i++) {
              state.formData.fileIds.push(currentSelectFileIds.value[i])
            }
            state.formData.oldLevel = currentSelectFileIds.value[0]
          }else{
            state.mode = 0
            state.title = "移动文件夹" + "：" + selectFolder.value.name
            state.formData.folderIds = []
            state.formData.folderIds.push(selectFolder.value.id)
            state.formData.oldLevel = selectFolder.value.parentLevel
          }
          state.data = [
            {
              id:"0",
              name:"根目录",
              children:[]
            }
          ]
          getList(0)
        }
        return dialogDrawer.value;
      },
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })

    const state = reactive({
      mode: 0, //0->单文件夹移动  1->文件批量移动
      isShow:false,
      firstLoading:false,
      data:[],
      defaultProps:{
        children: 'children',
        label: 'name'
      },
      title:"",
      currentSelectId:"0",
      formData:{
        fileIds:null,// 移动的文件
        folderIds:null,// 移动的文件夹id
        parentLevel:null,//目的地的目录
        oldLevel:null// 原目录
      }
    })
    //初始化
    const init = () => {
      state.formData = {
        fileIds:null,// 移动的文件
        folderIds:null,// 移动的文件夹id
        parentLevel:null,//目的地的目录
        oldLevel:null// 原目录
      }
    }
    //提交
    const submit = () => {
      state.formData.parentLevel = state.currentSelectId
      if(state.formData.parentLevel === state.formData.oldLevel){
        ElMessage.error("不能移动到当前文件夹!")
        return;
      }
      batchMove(state.formData).then(res=>{
        if(res.data != null){
          ElMessage.success("修改成功!")
          context.emit('onSubmit', true)
          close()
        }
      })
    }
    //关闭
    const close = () => {
      state.isShow = false
      context.emit('update:dialogDrawer', false)
    }
    //点击加载树节点
    const loadNode = (node,resolve) => {
      if(node.level > 0){
        getFolder(node.data.id).then(res =>{
          if (res.data.folders){
            resolve(res.data.folders)
          }
        }).catch((e)=>{
          console.log(e)
        })
      }else{
        resolve(state.data)
      }
      //仅第一次不加载
      state.firstLoading = true
    }
    //点击节点
    const handleNodeClick = (node) => {
      console.log(node)
      state.currentSelectId = node.id
    }
    //获取数据
    const getList = (id) => {
      getFolder(id).then(res =>{
        if (res.data.folders){
          //state.data[0].children = state.data[0].children.concat(res.data.folders)
          state.data[0].children.concat(res.data.folders)
        }
        state.isShow = true
      }).catch((e)=>{
        console.log(e)
      })
    }

    return{
      ...toRefs(state),
      ElMessage,
      drawer,
      dialogDrawer,
      selectFolder,
      currentSelectFileIds,
      close,
      submit,
      loadNode,
      getList,
      handleNodeClick,
      init,

    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-tree-node__content:hover){
  background-color: #dedede;
}

:deep(.el-tree .is-current > .el-tree-node__content){
  background-color: #dedede;
}
</style>
